.ui-slider-wraper{
	margin: 10px 0;
	&.round .ui-slider-horizontal{
		border-radius: 6px;
	}
	&.solid .ui-slider-horizontal{
		background-color: #eee;
	}
	&.round .ui-slider-back{
		border-radius: 6px;
	}
	*{
		box-sizing:border-box;
	}
}
.ui-slider-horizontal{
	width:200px;
	height:10px;
	border: 1px solid #c3c3d6;
	position:relative;
	overflow:visible;
	cursor:pointer;
	.ui-slider-handle{
		top: -3px;
    margin-left: -9px;
    //transition:left 0.6s ease-out;
	}
	.ui-slider-back{
		overflow: hidden;
		height:100%;
		position: absolute;
    background-color: #eee;
    //transition:width 0.6s ease-out;
    width:0%;
	}
}
.ui-slider-horizontal:hover .ui-slider-tip{
   display:block
}
.ui-slider-handle{
  cursor: pointer;
  display: inline-block;
  position: absolute;
	background-image: linear-gradient(to bottom,#fff 0,#e4e4e4 100%);
	background-repeat: repeat-x;
	border: 1px solid #d3d3d3;
  border-radius: 4px;
  height: 15px;
  width: 15px;
  z-index: 99;

  &:hover{
  	border: 1px solid #c3c3d6;
    background-color: #e6e6e6;
    background-position: 0 -5px;
    transition: background-position .1s linear;
  }

  .ui-slider-tip{
  	display:none;
  	position:absolute;
  	color: #fff;
  	background-color: rgba(0,0,0,.8);
  	padding: 4px 8px;
  	font-style:normal;
  	transform:translate(-50%, -140%);
  	left:50%;
  	border-radius:4px;

  	&::after{
  		content:'';
  		position:absolute;
  		width:0;
  		height:0;
  		border-color:transparent;
  		border-style: solid;
  		border-width: 8px;
  		border-top-color: rgba(0,0,0,.8);
  		bottom:-14px;
  		transform:translateX(-50%);
  		left:50%;
  	}

  	&.ui-slider-tip-show{
  		display:block;
  	}
	}
}

@mixin slider-theme($borderColor : #c3c3d6, $background : #fff, $handleColor : #e4e4e4, $handleBorder : #c3c3d6, $tipColor : rgba(0, 0, 0, 0.8)) {
  .ui-slider-horizontal{
    border: 1px solid $borderColor;
    .ui-slider-back{
      background-color: $background;
    }
    .ui-slider-handle{
      background-image: linear-gradient(to bottom,lighten($handleColor,30%) 0, $handleColor 100%);
      border: 1px solid $handleBorder;

      &:hover{
        border: 1px solid darken($handleBorder, 5%);
        background-color: $handleColor;
      }
      .ui-slider-tip{
        background-color: $tipColor;
        &::after{
          border-top-color: $tipColor;
        }
      }
    }
  }
}

.theme-default{
  @include slider-theme($base-theme-default, $base-theme-default, #e4e4e4);
  &.ui-slider-wraper.solid .ui-slider-horizontal{
		background-color: rgba($base-theme-default, 0.3);
	}
}
.theme-info{
  @include slider-theme($base-theme-info, $base-theme-info, #e4e4e4, #c3c3d6, $base-theme-info);
  &.ui-slider-wraper.solid .ui-slider-horizontal{
		background-color: rgba($base-theme-info, 0.2);
	}
}
.theme-success{
  @include slider-theme($base-theme-success, $base-theme-success, #e4e4e4, #c3c3d6, $base-theme-success);
  &.ui-slider-wraper.solid .ui-slider-horizontal{
		background-color: rgba($base-theme-success, 0.2);
	}
}
.theme-warning{
  @include slider-theme($base-theme-warning, $base-theme-warning, #e4e4e4, #c3c3d6, $base-theme-warning);
   &.ui-slider-wraper.solid .ui-slider-horizontal{
		background-color: rgba($base-theme-warning, 0.2);
	}
}
.theme-error{
  @include slider-theme($base-theme-error, $base-theme-error, #e4e4e4, #c3c3d6, $base-theme-error);
   &.ui-slider-wraper.solid .ui-slider-horizontal{
		background-color: rgba($base-theme-error, 0.2);
	}
}